<template>
    <button
        :type="buttonType"
        :class="classes"
        :disabled="disabled"
        @click="handleClickLink"
    >
         <Icon v-if="icon" :type="icon" size="20" color="white"></Icon>
        <slot></slot>
    </button>
</template>
<script>
    import { oneOf } from '../../utils/index';
    import Icon from '../icon/icon';
    const prefixCls = 'ifast';
export default {
    name: 'Button',
    props: {
        type: {
            type: String,
            default: 'default',
            validator(value){
                return oneOf(value,['default', 'primary', 'info', 'success', 'warning', 'danger', 'link'])
            }
        },
        size: {
            type:String,
            default:'sm',
            validator (value) {
                return oneOf(value, ['sm', 'lg', 'xs']);
            }
        },
        disabled: {
            type: Boolean,
            default: false
        },
        pill: {
            type: Boolean,
            default: false
        },
        long:{
            type:Boolean,
            default:false
        },
        icon:{
            type:String,
        },
        shape:{
            type:Boolean,
            default:false
        },
        buttonType:{
            type:String,
            default:'button'
        }
    },
    components: {Icon},
    data() {
        return　{
        }
    },
    mounted() {
    },
    methods: {
        handleClickLink() {
            if(this.disabled){
                return;
            }
            this.$emit('click')
        }
    },
    computed: {
        btnClasses() {
                return [
                    `${prefixCls}-btn`
                ]
        },
        classes () {
            return [
                `${prefixCls}-btn`,
                `${prefixCls}-btn-${this.type}`,
                `${prefixCls}-btn-${this.size}`,
                 [{
                        [`pill`]:this.pill,
                        [`${prefixCls}-btn-block`]:this.long,
                        [`${prefixCls}-btn-shape`]:this.shape
                    }]
            ];
            
        }
    },
    

}
</script>
